<template>
	<view class="page">
		<view class="earnings-summary bg-w pd30 mb20">
			<view class="summary-title">推广收益</view>
			<view class="total-amount">¥{{totalEarnings}}</view>
			<view class="earnings-stats">
				<view class="stat-item">
					<text class="value">¥{{todayEarnings}}</text>
					<text class="label">今日收益</text>
				</view>
				<view class="stat-item">
					<text class="value">¥{{monthEarnings}}</text>
					<text class="label">本月收益</text>
				</view>
				<view class="stat-item">
					<text class="value">¥{{yesterdayEarnings}}</text>
					<text class="label">昨日收益</text>
				</view>
			</view>
		</view>
		
		<view class="bg-w pd30 mb20">
			<view class="section-title">收益明细</view>
			
			<view class="filter-tabs">
				<view 
					v-for="(item, index) in earningTypes" 
					:key="index"
					:class="['tab-btn', {'active': currentType === item.value}]"
					@click="changeType(item.value)"
				>
					{{item.label}}
				</view>
			</view>
			
			<view class="earnings-list">
				<view v-for="(item, index) in earningsList" :key="index" class="earning-item">
					<view class="earning-info">
						<view class="earning-title">{{item.title}}</view>
						<view class="earning-desc">{{item.description}}</view>
						<view class="earning-time">{{item.create_time}}</view>
					</view>
					<view class="earning-amount" :class="item.type">
						{{item.type === 'income' ? '+' : '-'}}¥{{item.amount}}
					</view>
				</view>
			</view>
			
			<view v-if="earningsList.length === 0" class="empty-earnings">
				<view class="empty-text">暂无收益记录</view>
			</view>
		</view>
		
		<view class="bg-w pd30 mb20">
			<view class="section-title">收益分析</view>
			
			<view class="analysis-cards">
				<view class="analysis-card">
					<view class="card-title">平均每日收益</view>
					<view class="card-value">¥{{avgDailyEarnings}}</view>
				</view>
				<view class="analysis-card">
					<view class="card-title">最高单日收益</view>
					<view class="card-value">¥{{maxDailyEarnings}}</view>
				</view>
				<view class="analysis-card">
					<view class="card-title">收益增长率</view>
					<view class="card-value growth">{{growthRate}}%</view>
				</view>
			</view>
			
			<view class="chart-section">
				<view class="chart-title">最近30天收益趋势</view>
				<view class="chart-placeholder">
					<text>图表展示区域</text>
				</view>
			</view>
		</view>
		
		<view class="bg-w pd30 mb20">
			<view class="section-title">排行榜</view>
			
			<view class="ranking-list">
				<view v-for="(item, index) in rankingList" :key="index" class="ranking-item">
					<view class="ranking-number" :class="{'top-three': index < 3}">{{index + 1}}</view>
					<image :src="item.avatar" mode="aspectFill" class="ranking-avatar"></image>
					<view class="ranking-info">
						<view class="ranking-name">{{item.name}}</view>
						<view class="ranking-desc">团队{{item.teamSize}}人 · 商品{{item.goodsCount}}个</view>
					</view>
					<view class="ranking-earnings">¥{{item.earnings}}</view>
				</view>
			</view>
		</view>
		
		<view class="bg-w pd30 mb20">
			<view class="section-title">提现记录</view>
			
			<view class="withdraw-list">
				<view v-for="(item, index) in withdrawList" :key="index" class="withdraw-item">
					<view class="withdraw-info">
						<view class="withdraw-amount">¥{{item.amount}}</view>
						<view class="withdraw-time">{{item.create_time}}</view>
					</view>
					<view class="withdraw-status" :class="item.status">{{item.status_text}}</view>
				</view>
			</view>
			
			<view v-if="withdrawList.length === 0" class="empty-withdraw">
				<view class="empty-text">暂无提现记录</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';

export default {
	data() {
		return {
			currentType: '',
			earningTypes: [
				{ label: '全部', value: '' },
				{ label: '商品佣金', value: 'commission' },
				{ label: '团队佣金', value: 'team' },
				{ label: '奖励金', value: 'reward' },
				{ label: '提现', value: 'withdraw' }
			],
			totalEarnings: '5,680.50',
			todayEarnings: '126.80',
			monthEarnings: '3,890.30',
			yesterdayEarnings: '89.60',
			avgDailyEarnings: '189.35',
			maxDailyEarnings: '568.90',
			growthRate: '+15.6',
			earningsList: [
				{
					id: 1,
					title: '商品佣金收益',
					description: '豪华双人汉堡套餐订单佣金',
					amount: '9.98',
					type: 'income',
					category: 'commission',
					create_time: '2024-01-15 14:30'
				},
				{
					id: 2,
					title: '团队佣金收益',
					description: '下级分销商订单佣金',
					amount: '15.60',
					type: 'income',
					category: 'team',
					create_time: '2024-01-15 12:15'
				},
				{
					id: 3,
					title: '推荐奖励',
					description: '邀请好友奖励金',
					amount: '20.00',
					type: 'income',
					category: 'reward',
					create_time: '2024-01-14 18:45'
				},
				{
					id: 4,
					title: '提现',
					description: '提现到微信钱包',
					amount: '500.00',
					type: 'expense',
					category: 'withdraw',
					create_time: '2024-01-13 16:20'
				},
				{
					id: 5,
					title: '商品佣金收益',
					description: '专业SPA护理套餐订单佣金',
					amount: '37.60',
					type: 'income',
					category: 'commission',
					create_time: '2024-01-13 14:10'
				}
			],
			rankingList: [
				{
					name: '张先生',
					avatar: 'https://picsum.photos/seed/rank1/80/80.jpg',
					earnings: '12,580.50',
					teamSize: 45,
					goodsCount: 28
				},
				{
					name: '李女士',
					avatar: 'https://picsum.photos/seed/rank2/80/80.jpg',
					earnings: '9,890.30',
					teamSize: 32,
					goodsCount: 19
				},
				{
					name: '王先生',
					avatar: 'https://picsum.photos/seed/rank3/80/80.jpg',
					earnings: '8,456.80',
					teamSize: 28,
					goodsCount: 15
				},
				{
					name: '赵女士',
					avatar: 'https://picsum.photos/seed/rank4/80/80.jpg',
					earnings: '6,234.90',
					teamSize: 19,
					goodsCount: 12
				},
				{
					name: '刘先生',
					avatar: 'https://picsum.photos/seed/rank5/80/80.jpg',
					earnings: '5,123.40',
					teamSize: 15,
					goodsCount: 10
				}
			],
			withdrawList: [
				{
					id: 1,
					amount: '500.00',
					status: 'success',
					status_text: '已到账',
					create_time: '2024-01-13 16:20'
				},
				{
					id: 2,
					amount: '1000.00',
					status: 'pending',
					status_text: '处理中',
					create_time: '2024-01-12 10:30'
				},
				{
					id: 3,
					amount: '800.00',
					status: 'success',
					status_text: '已到账',
					create_time: '2024-01-08 14:45'
				}
			]
		};
	},
	computed: {
		...mapState(['memberInfo']),
		isLogin() {
			return this.memberInfo == null ? false : true;
		}
	},
	onLoad() {
		this.loadEarningsData();
	},
	methods: {
		loadEarningsData() {
			// 实际项目中这里会调用API
		},
		
		changeType(type) {
			this.currentType = type;
			// 过滤收益列表
		}
	}
};
</script>

<style>
.earnings-summary {
	background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
	color: white;
	border-radius: 12rpx;
	text-align: center;
}

.summary-title {
	font-size: 28rpx;
	margin-bottom: 20rpx;
	opacity: 0.9;
}

.total-amount {
	font-size: 56rpx;
	font-weight: 600;
	margin-bottom: 40rpx;
}

.earnings-stats {
	display: flex;
	justify-content: space-around;
}

.stat-item {
	text-align: center;
}

.stat-item .value {
	display: block;
	font-size: 28rpx;
	font-weight: 600;
	margin-bottom: 8rpx;
}

.stat-item .label {
	font-size: 24rpx;
	opacity: 0.9;
}

.section-title {
	font-size: 28rpx;
	color: #333;
	font-weight: 600;
	margin-bottom: 30rpx;
}

.filter-tabs {
	display: flex;
	margin-bottom: 30rpx;
}

.tab-btn {
	flex: 1;
	text-align: center;
	padding: 16rpx 0;
	font-size: 24rpx;
	color: #666;
	border-bottom: 2rpx solid transparent;
}

.tab-btn.active {
	color: #f5576c;
	border-bottom-color: #f5576c;
	font-weight: 600;
}

.earning-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 25rpx 0;
	border-bottom: 1rpx solid #f5f5f5;
}

.earning-item:last-child {
	border-bottom: none;
}

.earning-info {
	flex: 1;
}

.earning-title {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 8rpx;
}

.earning-desc {
	font-size: 24rpx;
	color: #999;
	margin-bottom: 8rpx;
}

.earning-time {
	font-size: 24rpx;
	color: #999;
}

.earning-amount {
	font-size: 32rpx;
	font-weight: 600;
}

.earning-amount.income {
	color: #2ed573;
}

.earning-amount.expense {
	color: #ff6b6b;
}

.empty-earnings {
	text-align: center;
	padding: 60rpx 0;
}

.empty-text {
	font-size: 28rpx;
	color: #999;
}

.analysis-cards {
	display: flex;
	gap: 20rpx;
	margin-bottom: 40rpx;
}

.analysis-card {
	flex: 1;
	background: #f8f9fa;
	border-radius: 12rpx;
	padding: 25rpx 20rpx;
	text-align: center;
}

.card-title {
	font-size: 24rpx;
	color: #666;
	margin-bottom: 15rpx;
}

.card-value {
	font-size: 32rpx;
	color: #333;
	font-weight: 600;
}

.card-value.growth {
	color: #2ed573;
}

.chart-section {
	margin-top: 30rpx;
}

.chart-title {
	font-size: 26rpx;
	color: #333;
	margin-bottom: 20rpx;
}

.chart-placeholder {
	height: 200rpx;
	background: #f5f5f5;
	border-radius: 8rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #999;
	font-size: 24rpx;
}

.ranking-item {
	display: flex;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f5f5f5;
}

.ranking-item:last-child {
	border-bottom: none;
}

.ranking-number {
	width: 40rpx;
	height: 40rpx;
	background: #f0f0f0;
	color: #999;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24rpx;
	margin-right: 20rpx;
}

.ranking-number.top-three {
	background: #f5576c;
	color: white;
}

.ranking-avatar {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	margin-right: 20rpx;
}

.ranking-info {
	flex: 1;
}

.ranking-name {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 8rpx;
}

.ranking-desc {
	font-size: 24rpx;
	color: #999;
}

.ranking-earnings {
	font-size: 28rpx;
	color: #f5576c;
	font-weight: 600;
}

.withdraw-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 25rpx 0;
	border-bottom: 1rpx solid #f5f5f5;
}

.withdraw-item:last-child {
	border-bottom: none;
}

.withdraw-info {
	flex: 1;
}

.withdraw-amount {
	font-size: 28rpx;
	color: #333;
	font-weight: 600;
	margin-bottom: 8rpx;
}

.withdraw-time {
	font-size: 24rpx;
	color: #999;
}

.withdraw-status {
	font-size: 24rpx;
	padding: 6rpx 16rpx;
	border-radius: 12rpx;
}

.withdraw-status.success {
	background: #d4edda;
	color: #155724;
}

.withdraw-status.pending {
	background: #fff3cd;
	color: #856404;
}

.empty-withdraw {
	text-align: center;
	padding: 60rpx 0;
}

.empty-withdraw .empty-text {
	font-size: 28rpx;
	color: #999;
}
</style>